import Link from 'next/link';
import { withRouter } from 'next/router';
import Head from '@/components/Head';
import Tkd from '@/ssr/tkd';
import { replaceImageUrl } from '@/utils';
import { match_destination_map } from '@/config';
// css
import styles from '@/styles/CommonList.module.scss';
// 组件
import Breadcrumb from '@/components/Breadcrumb';
// API
import { destinationList_SSR } from '@/ssr';

const Destination = ({ ssr }) => {
    return (
        <div className={[styles['common-list-page'], styles['destination']].join(' ')}>
            {/* tkd */}
            <Head meta={Tkd['/destination']()} />
            <div className="max-content">
                <Breadcrumb params={[{ name: '目的地', url: '/destination' }]} />
                <ul>
                    {
                        ssr.map(item => {
                            return (
                                <li className={styles['item']} key={item.id}>
                                    <Link href={match_destination_map(item.name)}>
                                        <a>
                                            <img src={replaceImageUrl(item.img[0])} alt="" />
                                            <h3><em>{item.name}</em> | {item.nameDesc}</h3>
                                        </a>
                                    </Link>
                                    <p>建议游玩：{item.times}</p>
                                    <p className={styles.desc}>{item.detail}</p>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        </div>
    )
}
// ssr
Destination.getInitialProps = async () => {
    const { ssr } = await destinationList_SSR();
    return { ssr }
}
export default withRouter(Destination)